{% extends "base.html" %}
{% block title %}Formularios{% endblock %}
{% block mainframe %}

			{% if form %}
				<h1>Formulario: {{ form.id }}</h1>
				<h2>{{ form.name }}</h2>

				<ul id="s-1" class="section" href="#s-1">
				   <p class="sectionlabel">Metadatos</p>
				   	{% if form.creation_date %}
					  	<p class="metadata">Fecha de creaci&oacute;n: <span class="metavalue">{{ form.creation_date }}</span></p>
					{% endif %}
				   	{% if form.geolocalized %}
					  	<p class="metadata">Geolocalizado <span class="metavalue"><input type="checkbox" id="geolocalization" disabled="disabled" checked="checked" /></span></p>
					{% else%}
						<p class="metadata">Geolocalizado <span class="metavalue"><input type="checkbox" id="geolocalization" disabled="disabled" /></span></p>
					{% endif %}
		 		</ul>

				{% for section in form.section_set.all %}
					 <ul id="s{{ section.id }}" class="section" href="#s{{ section.id }}">
					   <p class="sectionlabel">{{ section.name }}</p>
					   {% for field in section.formfield_set.all %}
	                       <li id="f{{ field.id }}" class="{{ field.type|lower }}">
								<div class="actions">
									{% if field.required %}
										<img src="/beekeeper/images/buttons/required.png" class="fieldButton">
									{% endif %}
									<img src="/beekeeper/images/buttons/more.png" onclick="javascript:expandField('f{{ field.id }}')" class="fieldButton">
								</div>
	                       		<p class="fieldlabel">{{ field.label }}</p>
	                       		<br />
		                       {% if field.property_set.all %}
									<div class="properties">
								   {% for property in field.property_set.all %}
										<p>{{ property.name }}: {{ property.value }}</p>		                       		
								   {% endfor %}
			                       	</div>
		                       {% endif %}
		                       {% if field.fieldoption_set.all %}
									<div class="options">
								   {% for option in field.fieldoption_set.all %}
										<p>{{ option.label }}: {{ option.value }}</p>		                       		
								   {% endfor %}
			                       	</div>
		                       {% endif %}
	                       </li>
					   {% endfor %}
					</ul>
				{% endfor %}


				<br/>
			{% else %}
				<h3>No se ha encontrado el formulario en la base de datos.</h3>
			{% endif %}

{% endblock %}

{% block sidebar %}
		    <ul>
				<li><a class="item" href="/beekeeper/show_form_list/" id="campo0">
					<img src="/beekeeper/images/tw_back.png" />
					<div class="label">
						<p><strong>Volver atr&aacute;s</strong></p>
					</div>
				</a></li>	
				<li>
					<form name="elementDelete" class="item" action="/beekeeper/show_form/{{ form.id }}/" method="post">
						{% csrf_token %}
					    <input type="hidden" name="elementToDelete" value="{{ form.id }}" />
					    <input type="image" src="/beekeeper/images/tw_delete.png" name="submit" />
					   	<div class="label">
							<p><strong>Eliminar formulario</strong></p>
						</div>
						<!--<a href="document.elementDelete.submit();"><span class="tableelement"><img class="delete" src="/beekeeper/images/buttons/delete.png" /></span></a>-->
					</form>
				</li>
				
				<!-- <a class="item" href="/beekeeper/delete_form/{{ form.id }}" id="campo1">
					<img src="/beekeeper/images/delete.png" />
					<div class="label">
						<p><strong>Eliminar formulario</strong></p>
					</div>
				</a></li> -->
				<li><a class="item" href="/beekeeper/show_instance_list/{{ form.id }}" id="campo2">
					<img src="/beekeeper/images/tw_instances.png" />
					<div class="label">
						<p><strong>Instancias</strong></p>
					</div>
				</a></li>
				<li><a class="item" href="/beekeeper/show_form_statistics/{{ form.id }}" id="campo3">
					<img src="/beekeeper/images/tw_statistics.png" />
					<div class="label">
						<p><strong>Estad&iacute;sticas</strong></p>
					</div>
				</a></li>
				<li><a class="item" href="/beekeeper/show_instances_map/{{ form.id }}" id="campo4">
					<img src="/beekeeper/images/tw_geolocalization.png" />
					<div class="label">
						<p><strong>Geolocalizaci&oacute;n</strong></p>
					</div>
				</a></li>			
			</ul>
{% endblock %}


{% block sectionslinks %}
	<ul>
		<li id="s-1link">
			<a href="#s-1" onclick="selectSection('s-1')">
				Metadatos
			</a>
		</li>
	{% for section in form.section_set.all %}
		<li id="s{{ section.id }}link">
			<a href="#s{{ section.id }}" onclick="selectSection('s{{ section.id }}')">
				Sección {{ section.order }}
			</a>
		</li>
	{% endfor %}
	</ul>
	
{% endblock %}


{% block result %}
	{% if deleting %}
      <p class="enlaceeliminar">¿Desea eliminar el formulario y todas sus instancias? <br /><a href="/beekeeper/delete_form/{{ formToDelete }}">Sí, eliminar formulario.</a></p>
    {% endif %}
{% endblock %}


{% block extrajs %}
	{% if deleting %}
		<script language="JavaScript">
			$("#resultado").toggle('slow');
	    </script>
    {% endif %}
{% endblock %}